import React, { Component } from 'react';
import "../styles/List.scss";

import pic from '../assets/pic.gif'



class List extends Component {
    // 定义组件状态
    constructor(props) {
        super(props)
        this.state = {
            currentIndex: 0,//保存点击的一级分类的下标
            catelist: [
                {
                    name: '活动专区',
                    sortlist: [
                        {
                            name: '超值好货',
                            goodslist: [
                                { pic, name: '卸妆' }, { pic, name: '乳液' }, { pic, name: '洁面' }, { pic, name: '面霜' }, { pic, name: '精华' }, { pic, name: '面膜' },
                            ]
                        },
                        {
                            name: '厂家直销',
                            goodslist: [
                                { pic, name: '护手霜' }, { pic, name: '手膜' }, { pic, name: '磨砂膏' }, { pic, name: '洗手液' }, { pic, name: '手部精华' }, { pic, name: '护甲油' },
                            ]
                        },
                    ]
                },
                {
                    name: '品牌',
                    sortlist: [
                        {
                            name: '国内品牌',
                            goodslist: [
                                { pic, name: '安踏' }
                            ]
                        },
                        {
                            name: '国际品牌',
                            goodslist: [
                                { pic, name: '斯凯奇' }
                            ]
                        },
                    ]
                },
                {
                    name: '美容护肤',
                    sortlist: [
                        {
                            name: '面部护理',
                            goodslist: [
                                { pic, name: '卸妆' }, { pic, name: '乳液' }, { pic, name: '洁面' }, { pic, name: '面霜' }, { pic, name: '精华' }, { pic, name: '面膜' },
                            ]
                        },
                        {
                            name: '手部护理',
                            goodslist: [
                                { pic, name: '护手霜' }, { pic, name: '手膜' }, { pic, name: '磨砂膏' }, { pic, name: '洗手液' }, { pic, name: '手部精华' }, { pic, name: '护甲油' },
                            ]
                        },
                    ]
                },
                {
                    name: '彩妆',
                    sortlist: [
                        {
                            name: '底妆',
                            goodslist: [
                                { pic, name: '粉底液' }
                            ]
                        },
                        {
                            name: '定妆',
                            goodslist: [
                                { pic, name: '散粉' }
                            ]
                        },
                    ]
                },
                {
                    name: '香水',
                    sortlist: [
                        {
                            name: '女士香水',
                            goodslist: [
                                { pic, name: '观夏' }, { pic, name: '配枪朱丽叶' }, { pic, name: 'BOOM' }, { pic, name: '范思哲' }, { pic, name: '圣罗兰' }, { pic, name: '纪梵希' },
                            ]
                        },
                        {
                            name: '男士香水',
                            goodslist: [
                                { pic, name: '古龙' }, { pic, name: '欧莱雅' }, { pic, name: '香奈儿' }, { pic, name: '阿玛尼' }, { pic, name: '祖玛珑' }, { pic, name: '迪奥' },
                            ]
                        },
                    ]
                },

                {
                    name: '酒类',
                    sortlist: [
                        {
                            name: '白酒',
                            goodslist: [
                                { pic, name: '茅台' }
                            ]
                        }
                    ]
                },
                {
                    name: '腕表首饰',
                    sortlist: [
                        {
                            name: '珠宝',
                            goodslist: [
                                { pic, name: '淡水珍珠' }
                            ]
                        }
                    ]
                },
                {
                    name: '服饰箱包',
                    sortlist: [
                        {
                            name: '羽绒服',
                            goodslist: [
                                { pic, name: '长款羽绒服' }
                            ]
                        }
                    ]
                },
                {
                    name: '食品保健',
                    sortlist: [
                        {
                            name: '维生素',
                            goodslist: [
                                { pic, name: '维c' }
                            ]
                        }
                    ]
                }
            ]
        }
    }

    handleClick(index) {
        this.setState({ currentIndex: index })
    }
    render() {
        return (
            <div className='list'>
                <div className="left">
                    {
                        this.state.catelist.map((item, index) => {
                            return (
                                <div onClick={() => { this.handleClick(index) }} className={"name "+(this.state.currentIndex==index?'active':'') } key={index}>{item.name}</div>
                            )
                        })
                    }
                </div>

                <div className="right">
                    {
                        //二级分类
                        this.state.catelist[this.state.currentIndex].sortlist.map((sort, index) => {
                            return (
                                <div className='sortbox' key={index}>
                                    <h3>{sort.name}</h3>
                                    <div className="goodsbox">
                                        {
                                            //sort.gooodslist是二级分类的三级分类列表
                                            //gooodslist是每个三级分类
                                            sort.goodslist.map((goods, index) => {
                                                return (
                                                    <div className="goods" key={index}>
                                                        <img src={goods.pic} alt="" />
                                                        <div className="name">
                                                            {goods.name}
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>

            </div>
        );
    }
}

export default List;